<template>
  <div id='app'>
    <div>姓名: <input v-model.trim="userName" type="text"> </div>
    <div>年龄: <input v-model.number="age" type="text"> </div>
    <div>身高: <input v-model.number="height" type="text">(米)</div>
    <div>体重: <input v-model="weight" type="text">(公斤)</div>
    <div>病史: <input v-model="isIll" type="text"> </div>
    <button @click="diagnose">诊断</button>
    <div v-show="isOk">患者 {{ userName }} 的诊断结果：{{ bmi }}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      userName: '',
      age: 0,
      height: 0,
      weight: 0,
      isIll: '',
      isOk: false,
      bmiResult: ''
    }
  },
  computed: {
    bmi() {
      if (this.height > 0) {
        const res = (this.weight / (this.height * this.height)).toFixed(2)
        if (res <= 18.5) {
          return '体重过轻'
        } else if (res < 24.9) {
          return '正常'
        } else if (res < 29.9) {
          return '体重过重'
        } else {
          return '肥胖'
        }
      } else {
        return '请输入有效身高';
      }
    }
  },
  methods: {
    diagnose() {
      // 1.判空
      if (!this.userName || !this.age || !this.height || !this.weight) {
        alert('内容不能为空')
        return
      }
      // 检查 age 是否为正整数，height 和 weight 是否为正数
      if (this.age < 0 || this.height <= 0 || this.weight <= 0) {
        alert('请输入有效的数据');
        return;
      }
      // 2.显示内容
      this.isOk = true
    }
  }
}
</script>

<style>
input {
  margin: 10px;
}
</style>